
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=BGze5j9rPxgn32FS2b6biZD8qGti4ezR"></script>
    <link href="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.js"></script>
    <style type="text/css">
        #container {width: 100%; height: 1000px; overflow: hidden; margin: 0; font-family: "微软雅黑";}
        ul li {list-style: none;}
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
        .drawing-panel {
            z-index: 999;
            position: fixed;
            bottom: 3.5rem;
            margin-left: 2.5rem;
            padding-left: 0;
            border-radius: .25rem;
            height: 47px;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
        .bmap-btn {
            border-right: 1px solid #d2d2d2;
            float: left;
            width: 64px;
            height: 100%;
            background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
            cursor: pointer;
        }
        .drawing-panel .bmap-marker {
            background-position: -65px 0;
        }
        .drawing-panel .bmap-polyline {
            background-position: -195px 0;
        }
        .drawing-panel .bmap-rectangle {
            background-position: -325px 0;
        }
        .drawing-panel .bmap-polygon {
            background-position: -260px 0;
        }
        .drawing-panel .bmap-circle {
            background-position: -130px 0;
        }
    </style>

<ul class = "drawing-panel">
    <!--<li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>-->
    <!--<li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>-->
    <!--<li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>-->
    <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
    <!--<li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>-->
</ul>
<div id = "container"></div>
<script type="text/javascript">

    var map = new BMapGL.Map("container", {enableMapClick:false}); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
    map.centerAndZoom(new BMapGL.Point(114.30, 30.60), 11);      // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);                               // 开启鼠标滚轮缩放

    var styleOptions = {
        strokeColor: '#5E87DB',   // 边线颜色
        fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2,          // 边线宽度，以像素为单位
        strokeOpacity: 1,         // 边线透明度，取值范围0-1
        fillOpacity: 0.2          // 填充透明度，取值范围0-1
    };
    var labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
    };

    // 实例化鼠标绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true,   // 是否开启边界吸附功能
        sorptiondistance: 20,   // 边界吸附距离
        circleOptions: styleOptions,     // 圆的样式
        polylineOptions: styleOptions,   // 线的样式
        polygonOptions: styleOptions,    // 多边形的样式
        rectangleOptions: styleOptions,  // 矩形的样式
        labelOptions: labelOptions,      // label样式
    });

    function draw(e) {
        var arr = document.getElementsByClassName('bmap-btn');
        for(var i = 0; i<arr.length; i++) {
            arr[i].style.backgroundPositionY = '0';
        }
        e.style.backgroundPositionY = '-52px';
        switch(e.id) {
            case 'marker': {
                var drawingType = BMAP_DRAWING_MARKER;
                break;
            }
            case 'polyline': {
                var drawingType = BMAP_DRAWING_POLYLINE;
                break;
            }
            case 'rectangle': {
                var drawingType = BMAP_DRAWING_RECTANGLE;
                break;
            }
            case 'polygon': {
                var drawingType = BMAP_DRAWING_POLYGON;
                break;
            }
            case 'circle': {
                var drawingType = BMAP_DRAWING_CIRCLE;
                break;
            }
        }
        // 进行绘制
        if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
            drawingManager.close();
        } else {
            drawingManager.setDrawingMode(drawingType);
            drawingManager.open();
        }
        
    if (drawingType == 'rectangle') {
        // 监听矩形绘制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取矩形对象
          const rectangle = e.overlay;
          // 获取矩形的四个顶点
          const points = rectangle.getPath();
          console.log(points, "顶点");
          this.scope_point = points;
        });
      } else if (drawingType == 'circle') {
        // 监听圆形绘制完成事件
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取圆形对象
          const circle = e.overlay;
          // 获取圆形的圆心
          const center = circle.getCenter();
          console.log(center, "圆心");
          // 获取圆形的半径
          const radius = circle.getRadius();
          console.log(radius, "半径");
          this.scope_point = center;
          this.scope_radius = radius;
        });
      }else if (drawingType == 'polygon') {
         
        // 监听圆形绘制完成事件
         drawingManager.addEventListener("overlaycomplete", (e) => {
          
            var admin_list = '{!! $admin_list !!}';
            
            var dataObj = JSON.parse(admin_list);

            var admin_select = '<select class="form-control" id="admin_select">';
            
            for(i=0;i<dataObj.length;i++){
                admin_select+='<option value="'+dataObj[i].id+'">'+dataObj[i].name+'<'+'/'+'option>';
            }

            admin_select+='<'+'/'+'select>';
        
            layer.open({
                 
                  content:admin_select
                  ,btn: ['确定', '取消']
                  ,title: '绑定网点'
                  ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                      // 获取多边形对象
                    const polygon = e.overlay;
                    $.ajax({
                          url: "/admin/admin_points",
                          type: "get",
                          dataType: "json",
                          data: {"points": JSON.stringify(polygon.points), "admin_id": $("#admin_select").val()},
                          success: function (data) {
                                layer.closeAll();
                                window.location.href = "/admin/regional/division?type=1";
                                //在控制台输出返回结果
                          }
                    })
                  }
                  ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
           
                    //return false 开启该代码可禁止点击该按钮关闭
                  }
                  ,cancel: function(){ 
                    //右上角关闭回调
                    
                    //return false 开启该代码可禁止点击该按钮关闭
                  }
            });
        });
      } else if (drawingType == 'marker') {
        drawingManager.addEventListener("overlaycomplete", (e) => {
          // 获取标注对象
          const marker = e.overlay;
          // 获取标注的经纬度坐标
          this.point = marker.getPosition();
          // 创建地理编码服务实例
          const geocoder = new BMapGL.Geocoder();
          // 将经纬度坐标解析为地址信息
          geocoder.getLocation(this.point, (result) => {
            this.newForm.address = result.address;
            console.log(this.point, result.address, "地址");
          });
        });
      }
    };

</script>